<template>
  <div class="code">
    <div class="captcha-container">
      <div class="captcha-bg" :style="{ backgroundImage: `url(${data.originalImage})`  }" ></div>
      <div 
        class="captcha-slider" 
        :style="{ 
          backgroundImage: `url(${data.slideImage})`,
          left: `${sliderLeft}px`
        }"
      ></div>
    </div>
    <div class="captcha-text mt10 relative">
      <div>{{ codeText }}</div>
      <div 
        class="slideBtn" 
        @mousedown="startDrag"
        :style="{ left: `${slideBtnLeft}px` }"
      ></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted,watch } from 'vue';

export default defineComponent({
  name: 'SlideCaptcha',
  props: {
    data: {
      type: Object,
      required: true,
    }
  },
  emits: ['success', 'fail'],
  setup(props, { emit }) {
    watch(()=>props.data,(newVal,oldValue)=>{
        console.log(newVal,oldValue);
        codeText.value='向右拖动滑块完成验证'
        slideBtnLeft.value=0
        sliderLeft.value=0
        isDragging.value=false
        startX.value=0
      },{ deep: true })
    const codeText = ref('向右拖动滑块完成验证');
    const slideBtnLeft = ref(0);
    const sliderLeft = ref(0);
    const isDragging = ref(false);
    const startX = ref(0);
    const containerWidth = 312; // 容器宽度
    const sliderWidth = 50; // 滑块宽度
    
    // 开始拖动
    const startDrag = (e: MouseEvent) => {
      isDragging.value = true;
      startX.value = e.clientX - slideBtnLeft.value;
      document.addEventListener('mousemove', drag);
      document.addEventListener('mouseup', endDrag);
      document.addEventListener('mouseleave', endDrag);
    };

    // 拖动中
    const drag = (e: MouseEvent) => {
      if (!isDragging.value) return;
      
      // 计算新位置
      let newLeft = e.clientX - startX.value;
      
      // 限制在容器范围内
      newLeft = Math.max(0, Math.min(newLeft, containerWidth - sliderWidth));
      
      slideBtnLeft.value = newLeft;
      sliderLeft.value = newLeft / (containerWidth - sliderWidth) * (containerWidth - 46); // 46是滑块图片宽度
      
      
     codeText.value = '释放验证';
    };

    // 结束拖动
    const endDrag = () => {
      if (!isDragging.value) return;
      
      isDragging.value = false;
      document.removeEventListener('mousemove', drag);
      document.removeEventListener('mouseup', endDrag);
      document.removeEventListener('mouseleave', endDrag);
      
       verifySuccess();
    };

    // 验证成功
    const verifySuccess = () => {
      codeText.value = '验证中...';
      console.log(slideBtnLeft.value);
      
      emit('success', slideBtnLeft.value);
    };

    // 重置滑块
    const resetSlider = () => {
      slideBtnLeft.value = 0;
      sliderLeft.value = 0;
      codeText.value = '向右拖动滑块完成验证';
      emit('fail');
    };

    // 组件卸载时清除事件监听
    onUnmounted(() => {
      document.removeEventListener('mousemove', drag);
      document.removeEventListener('mouseup', endDrag);
      document.removeEventListener('mouseleave', endDrag);
    });

    return {
      codeText,
      slideBtnLeft,
      sliderLeft,
      startDrag
    };
  }
});
</script>

<style scoped lang="scss">
.code {
  width: 312px;
  user-select: none;
}

.captcha-container {
  width: 312px;
  height: 157px;
  border: 1px solid #ddd;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

.captcha-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background: no-repeat;
}

.captcha-slider {
  width: 46px;
  height: 157px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  background: no-repeat;  
  // background-size: 300px 150px;
  // transition: left 0.1s;
}

.captcha-text {
  width: 312px;
  height: 50px;
  background: rgba(238, 241, 248, 1);
  margin-top: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slideBtn {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  background: #fff;
  border: 1px solid #a29f9f;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &:active {
    cursor: grabbing;
    background: #f0f0f0;
  }
  
  &::after {
    content: "→";
    font-size: 20px;
    color: #666;
  }
}
</style>